* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(200deg, #0c3483, #a2b6df);
}
.wrapper {
    width: 450px;
    background-color: #fff;
    padding: 40px;
    box-shadow: 0px 0px 10px rbga(0, 0, 0, 0.1);
    border-radius: 8px;
    .input-data {
        position: relative;
        width: 100%;
        height: 40px;
        input {
            width: 100%;
            height: 100%;
            border: none;
            font-size: 17px;
            border-bottom: 2px solid #c0c0c0;
            &:focus,
            &:valid {
                ~ label {
                    transform: translateY(-25px);
                    font-size: 15px;
                    color: #2c6fdb;
                }
                ~ .underline {
                    transform: scaleX(1);
                }
            }
        }
        label {
            position: absolute;
            bottom: 10px;
            left: 0px;
            color: #808080;
            pointer-events: none;
            transition: all 0.3s ease;
        }
        .underline {
            position: absolute;
            bottom: 0px;
            height: 2px;
            width: 100%;
            background-color: #2c6fdb;
            transform: scaleX(0);
            transition: all 0.3s ease;
        }
    }
}
